"MouseOver to DropDown"
Bootstrap 3.0.0 Snippet by Surya Varre

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title> DCCB|| Hyderbad</title> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <style> .list-inline { padding-left: 0; margin-left: -89px; list-style: none; } .nav>li>a { position: relative; display: block; padding: 10px 15px; font-size: 16px; font-weight: 800; text-align:center; color: #45a9ff; } .container-fluid.top_bar { background-color: currentColor; } ul.nav.navbar-nav { /* padding-top: 10px; */ margin-top: 9px; } #topNav{ background-color: #1A8749; } #topNav ul{ list-style:none; padding:0px; } #topNav ul li{ padding: 8px 8px 0px; } #topNav ul li a{ color:#fff; } #topNav ul li a:hover{ color:#fda10e; } .col-sm-4 img { vertical-align: middle; margin-top: 10px; } .col-sm-4 .circle img { vertical-align: middle; margin-top: 10px; size: 200 100px; width: 93px; height: 79px; } .col-sm-4 .text img { vertical-align: middle; margin-top: 10px; size: 200 100px; width: 234px; height: 77px; margin-left: -122px; ; } #topNav ul li { padding: 8px 8px 0px; color: white; font-family: 'Montserrat', sans-serif; } .dropdown-menu>li>a { display: block; padding: 9px 20px; clear: both; font-weight: 400; line-height: 1.42857143; color: #1e86c4; white-space: nowrap;} .pull-right img { vertical-align: middle; color: white; padding-top: 3px; padding-left: 19px; height: 37px; width: 54px; } .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover { color: #ffffff; text-decoration: none; background-color: #1a8749; font-family: 'Montserrat', sans-serif; font-weight: 600; } .dropdown-menu>li>a { display: block; padding: 9px 20px; clear: both; font-weight: 400; line-height: 1.42857143; color: #45a9ff; white-space: nowrap; font-family: 'Montserrat', sans-serif; font-weight: 600; } .navbar-nav>li>.Network { margin-top: 0px; border-top-left-radius: 0; border-top-right-radius: 0; } .navbar-toggle { position: relative; float: right; padding: 9px 10px; margin-top: 8px; margin-right: 15px; margin-bottom: 8px; background-color: rgb(26, 135, 73); background-image: none; border: 1px solid transparent; border-radius: 4px; FONT-WEIGHT: 900; } /*************************************************media querys***********************************************/ @media screen and (min-width:300px)and (max-width:320px) {#topNav ul { margin-left: 35px; }} @media screen and (max-width:320px) and (min-width:280px){ .col-sm-4 .text img { vertical-align: middle; margin-top: -52px; size: 200 100px; width: 189px; height: 44px; margin-left: 73px; } .col-sm-4 .circle img { vertical-align: middle; margin-top: 10px; size: 200 100px; width: 74px; height: 60px; }} @media screen and (max-width:375px) and (min-width:320px){ .col-sm-4 .text img { vertical-align: middle; margin-top: -52px; size: 200 100px; width: 189px; height: 44px; margin-left: 73px; } .col-sm-4 .circle img { vertical-align: middle; margin-top: 10px; size: 200 100px; width: 74px; height: 60px; } #topNav ul { margin-left: 35px; }} @media screen and (max-width:425px) and (min-width:375px){ .col-sm-4 .text img { vertical-align: middle; margin-top: -52px; size: 200 100px; width: 189px; height: 44px; margin-left: 42px; } .col-sm-4 .circle img { vertical-align: middle; margin-top: 10px; size: 200 100px; width: 74px; height: 60px; margin-left: -26px; } #topNav ul { margin-left: 35px; } .navbar-toggle { position: relative; float: right; padding: 9px 10px; margin-top: -51px; margin-right: 15px; margin-bottom: 8px; background-color: rgb(26, 135, 73); background-image: none; border: 1px solid transparent; border-radius: 4px; FONT-WEIGHT: 900; }} @media screen and (max-width:1280px) and (min-width:1200px){ .list-inline { margin-left: -33px; }} @media screen and (max-width:768px) and (min-width:426px){ .col-sm-4 .text img { vertical-align: middle; margin-top: -84px; width: 192px; height: 77px; margin-left: 62px; } .col-sm-4 .circle img { vertical-align: middle; margin-top: 10px; size: 200 100px; width: 68px; height: 78px; } .col-md-6.col-sm-6.col-xs-12.p0 { margin-left: 177px; font-size: 10px; }} </style> </head> <body> <section id="topNav"> <div class="container"> <div class="row"> <div class="col-md-12 col-sm-12 col-xs-12 p0"> <div class="col-md-6 col-sm-6 col-xs-12 p0"> <ul class="list-inline"> <li>TOLL FREE NO:0000000000</li> <li class="hidden-xs">Email :gggggggggggggb.org.</li> </ul> </div> <div class="col-md-6 col-sm-6 col-xs-12"> <div class="pull-right"> <img src="img/.png" alt="rbi"> <img src="img/.png" alt="rbi"> <img src="img/.gif" alt="rbi"></div> </div> </div> </div> </div> </section> <!--=================================top nav end================================================--> <div class="container-fluid top_bar"> <div class="row"> <a href="index.php"> <div class="col-sm-4 col-md-4 col-xs-12"><div class="col-md-6 col-xs-12 circle"></div><div class="col-md-6 col-xs-12 text">></div> </div></a> <!--===================================================================================== ===============================navbar===================================================--> <div class="col-sm-8 center"> <!--header--> <nav class="navbar navbar-inverse0"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> MENU </button> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="index.php">Home</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="true">About <span class="caret"></span></a> <ul class="dropdown-menu Network"> <li><a href="about.php">About Us</a></li> <li><a href="computarized.php">about</a></li> <li><a href="finacial.php">about</a></li> </ul> </li> <!--================================================--> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="true">Management <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="bod.php">Board Of Directors</a></li> <li><a href="managersemail.php"> Phone s</a></li> <li><a href="contactdetails.php">Telephone</a></li> </ul> </li> <!--===========================--> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="true">Financial <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="banking.php">Banking</a></li> <li><a href="loans.php">Loans</a></li> <li><a href="deposites.php">moneny</a></li> <li><a href="rateofint.php">Rate</a></li> <!-- <li><a href="Recapitalization.php">Recapitalization Assistance in respect of PACS</a></li> <li><a href="#">BALANCE SHEET</a></li>--> </ul> </li> <!--==============================================================--> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="true">Network <span class="caret"></span></a> <ul class="dropdown-menu Network"> <li><a href="model2.php">Branches </a></li> <li><a href="pacs.php">PAx</a></li> </ul> </li> <!--products--> <li><a href="contact.php">Contact Us</a></li> </ul> </div> </div> </nav> <!--end header--> </div> <!--====================================================================================== ========================================================navbar end========================--> </div> </div> <!-- script-for-dropdownmenu --> </body> </html>
$(document).ready(function(){ $(".dropdown").hover( function() { $('.dropdown-menu', this).not('.in .dropdown-menu').stop( true, true ).slideDown("fast"); $(this).toggleClass('open'); }, function() { $('.dropdown-menu', this).not('.in .dropdown-menu').stop( true, true ).slideUp("fast"); $(this).toggleClass('open'); } ); });

Related: See More

Material Kit PRO BS3
Navbar with Social icon & Dropdown
Nav-tabs dropdown
Advanced Dropdown Search

Questions / Comments: